<template>
	<view class="container">
		<view class="top-header">
			<image src="/static/back.png" @click="back" />
			<view class="left">
				<view class="topic">
					AI写作
				</view>
				<view class="number">
					<view class="">
						{{num}}字
					</view>

				</view>
			</view>
		</view>
		<view class="centens">
			{{content}}
		</view>
		<view class="content">
			<text v-if="isEdit" class="show" decode="true" user-select="true">{{text}}</text>
			<textarea v-if="!isEdit" class="edit" name="" id="" cols="30" maxlength="1000" v-model="text"></textarea>
			<!-- <textarea  class="edit" maxlength="-1" 	auto-height model:value="{{article}}" /> -->
		</view>
		
		<view class="bottom-tools">
			<view class="tools-item" @click="copy">
				<image src="/static/copy.png" />
			</view>
			<view class="tools-item" @click="toChange">
				<image :src="false?'/static/check_active.png':'/static/check.png'" />
			</view>
			<view class="tools-item" @click="reflesh">
				<image src="/static/update.png" />
			</view>
		
			<!-- 悬浮按钮 -->
			<view class="add" bindtap="toHandwriting" @click="Generate">
				<image src="/static/hand.png" />
			</view>
		</view>
		<view><web-view v-if="webUrl" @message="message" :src="webUrl"></web-view></view>
	</view>

</template>

<script>
	import uParse from '@/components/gaoyia-parse/parse.vue' 
	export default {
		data() {
			return {
				text: '',
				isEdit: true,
				num:'',
				content:'',
				html:'',
				webUrl:''
			}
		},
		onLoad() {
			uni.showLoading({
				title: '加载中'
			});
			let num = uni.getStorageSync('num');
			this.num=num
			let continueParams = uni.getStorageSync('continueParams');
			// console.log(continueParams.content);
			this.content = continueParams.content
			// this.text=article.content
			uni.request({
				url: 'http://aicreation.lipux.cn/ai',
				data: continueParams,
				method: 'POST',
				success: (res) => {
					uni.hideLoading();
					if (res.data.code === 200) {
						// console.log(res);
						this.text = res.data.data.content
					}
				},
				fail: (err) => {
					console.log(err)
				}
			})
				// uni.removeStorage({
				// 	key: 'id',//本地缓存中的指定的 key
				// 	success(res) {//接口调用的回调函数
				// 		console.log('移除成功');
				// 	}
				// })


		},
		methods: {
			message(e){
				console.log(e)
			},
			Generate() {
				location.href = `http://aicreation.lipux.cn/hw/#/?article=${encodeURIComponent(JSON.stringify(this.text))}`
				// this.webUrl='http://aicreation.lipux.cn/hw/#/?article='+this.text
			},
			toChange() {
				if (this.isEdit == true) {

					this.isEdit = false
					uni.showToast({
						title: '已开启编辑功能'
					})
				} else {
					this.isEdit = true
					uni.showToast({
						title: '已关闭编辑功能'
					})
				}
			},
			copy() {
				uni.setClipboardData({
					data: this.text,
					success: function() {
						// console.log('success'); //调用方法成功
						uni.showToast({
							title: '已复制文章',
							duration: 2000,
							icon: "success"
						})
					}
				})
			},
			back() {
				uni.navigateBack()
			},
			reflesh() {

				const pages = getCurrentPages()
				//声明一个pages使用getCurrentPages方法
				const perpage = pages[pages.length - 1]
				//声明一个当前页面
				perpage.onLoad()
			}

		}
	}
</script>

<style lang="less" scoped>
	page {
		/* background-color: #fafafa; */
	}

	.container {
		width: 100%;
		height: 100%;
		// padding-top: 100rpx;
	}


	.top-header {
		display: flex;
		align-items: center;
		width: 100%;
		height: 140rpx;
		padding-left: 30rpx;
		background-color: #fff;
		z-index: 99;
		box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.05);
	}

	.top-header image {
		width: 45rpx;
		height: 45rpx;
		padding: 10rpx;
		margin-right: 15rpx;
	}

	.top-header .topic {
		font-size: 35rpx;
		font-weight: 700;
	}

	.top-header .number {
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.45);
		margin-top: 5rpx;
	}

	.header .tools {
		display: flex;
	}

	.tools image {
		width: 40rpx;
		height: 40rpx;
		margin-left: 35rpx;
	}
	.centens {
		padding: 30rpx 40rpx;
		font-size: 30rpx;
		line-height: 1.6;
		margin: 30rpx;
	}

	.content {
		padding: 30rpx 40rpx;
		font-size: 35rpx;
		line-height: 1.6;
		word-spacing: 20rpx;
		background-color: #fff;
		/* box-shadow: 0 1px 5px rgba(18, 18, 18, 0.1); */
		margin: 30rpx;
		/* border-radius: 10rpx; */
		/* text-indent: 10rpx; */
		padding-bottom: 100rpx;
	}

	.content .edit {
		width: 100%;
		height: 100vh;
		// font-size: 35rpx;
		// line-height: 1.6;
		// word-spacing: 20rpx;
		margin-bottom: 100rpx;
		/* margin: 30rpx; */
		/* padding-bottom: 100rpx; */
	}

	.add {
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		bottom: 50rpx;
		right: 50rpx;
		height: 100rpx;
		width: 100rpx;
		text-align: center;
		/* background-color: #30b89c; */
		border-radius: 50%;
		background: linear-gradient(130.4deg, rgba(68, 212, 183, 1) 0%, rgba(48, 184, 156, 1) 100%);
		box-shadow: 0px 2px 10px 1px rgba(48, 184, 156, 0.25);
	}

	.add image {
		width: 50rpx;
		height: 50rpx;
	}

	.sheet-content {
		margin: 30rpx 0;
	}

	.title {
		margin: 38rpx;
		display: flex;
	}

	.title .side {
		width: 11rpx;
		background-color: #1459F1;
		border-radius: 50rpx;
		padding: 10rpx 0;
		margin-right: 20rpx;
	}

	.title .titleContent {
		font-size: 35rpx;
	}

	.scroll-wrap {
		/* min-width: 100%; */
		white-space: nowrap;
	}

	.font-list {
		margin: 0 30rpx;
		/* width: 100%; */
		display: flex;
	}

	.font-list .font-item {
		position: relative;
		background-color: #eee;
		/* width: 100rpx; */
		margin-right: 30rpx;
		/* padding: 20rpx; */
		display: inline-block;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.font-list .current {
		background-color: #1459F1;
		color: #fff;
	}

	.font-list .font-item .font-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		transition: all .2s;
	}

	.font-list .font-item .font-content .font-show {
		margin: 25rpx 0;
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
	}

	.font-list .font-item .font-content .font-title {
		font-size: 27rpx;
		padding: 20rpx;
		text-align: center;
		background-color: #145af1b2;
		color: #fff;
	}

	.font-list .font-item .cover {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.411);
		color: #fff;
	}

	.bottom-tools {
		z-index: 9999;
		display: flex;
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		height: 100rpx;
		padding-left: 30rpx;
		box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.1);
	}

	.tools-item {
		width: 110rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tools-item image {
		width: 45rpx;
		height: 45rpx;
	}
	.centens {

	}
</style>
